import React, { Component } from "react";
import {Layout,Menu} from 'antd';
// import {menulist} from './menulist';
import axios from 'axios';
import {withRouter} from 'react-router-dom'
const { Sider} = Layout;
class Sidebox extends Component{
  state={
    items:[]
  }
  handlemenu=(handle)=>{
    this.props.history.push(handle.key)
  }

    componentDidMount(){
      axios.get('http://localhost:8000/posts').then(res=>
      this.setState({
         items:res.data
      }))
    }

    render(){
       const {items}=this.state;
       const selectkeys=[this.props.location.pathname];
       const openkey=['/'+this.props.location.pathname.split('/')[1]];
        return (
         <>
         <Sider trigger={null} collapsible >
          {/* 外面套一层div */}
          <div style={{display:'flex',height:'100%',flexDirection:'column'}}>
          <div className="logo" >全球新闻发布系统</div>
          <div style={{flex:1,overflow:'hidden'}}>
          <Menu
          theme="dark"
          mode="inline"
          selectedKeys={selectkeys}
          defaultOpenKeys={openkey}
          items={items}
          onClick={this.handlemenu}
        />
          </div>
          </div>
       </Sider>
        </>
        )
    }
}
export default withRouter(Sidebox);
